<template>
	<view class="orderGoods">
		<view class="total">共4件商品</view>
		<view class="goodWrapper">
			<view class="item acea-row row-between-wrapper" v-for="(item,index) in list" :key="index">
				<view class="pic"><image :src="item.productInfo.attrInfo.image" mode=""></image></view>
				<view class="text">
					<view class="acea-row row-between-wrapper">
						<view class="name line1">{{item.productInfo.store_name}}</view>
						<view class="num">x {{item.cart_num}}</view>
					</view>
					<view class="attr line1">{{item.productInfo.attrInfo.suk}}</view>
					<view class="money font-color">￥{{item.truePrice}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Array,
				default:[]
			}
		}
	}
</script>

<style>
	.orderGoods{
		background-color: #fff;
		margin-top: 12rpx;
	}
	.orderGoods .total{
		width: 100%;
		height: 86rpx;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
		font-size: 30rpx;
		color: #282828;
		line-height: 86rpx;
		box-sizing: border-box;
	}
	.orderGoods .goodWrapper .item{
		margin-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
		height: 180rpx;
	}
	.orderGoods .goodWrapper .item .pic{
		width: 130rpx;
		height: 130rpx;
	}
	.orderGoods .goodWrapper .item .pic image{
		border-radius: 6rpx;
	}
	.orderGoods .goodWrapper .item .text{
		width: 537rpx;
		position: relative;
	}
	.orderGoods .goodWrapper .item .text .acea-row .name{
		font-size: 28rpx;
		color: #282828;
		width: 453rpx;
	}
	.orderGoods .goodWrapper .item .text .acea-row .num{
		font-size: 26rpx;
		color: #868686;
	}
	.orderGoods .goodWrapper .item .text .attr{
		font-size: 20rpx;
		color: #868686;
		margin-top: 7rpx;
	}
	.orderGoods .goodWrapper .item .text .money{
		font-size: 26rpx;
		margin-top: 17rpx;
	}
</style>
